<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Complex DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#test').datagrid({
				title:'My DataGrid',
				iconCls:'icon-save',
				width:700,
				height:350,
				nowrap: false,
				striped: true,
				collapsible:true,
				url:'datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				singleSelect:false,
				fitColumns:true,
				frozenColumns:[[
	                {field:'ck',checkbox:true}
	                
				]],
				columns:[
				[
			        {title:'Base Information',colspan:3},
					{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
						formatter:function(value,rec){
						    
							return "<input type='button' onclick=test('"+rec.code+"') value='查看'>";
						}
					}
					 
					
				],
				[
					{field:'name',title:'name',width:120},
					{field:'addr',title:'addr',width:220,sortable:true,
						sorter:function(a,b){
							return (a>b?1:-1);
						}
					},
				 
					{field:'phone',title:'phone',width:70,editor:'text'} 
				] 
				],
				pagination:true,
				rownumbers:false,
				toolbar:[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
					var lastIndex;
						$('#btnsave').linkbutton('enable');
						// $('#test').datagrid('endEdit', lastIndex);
						$('#test').datagrid('appendRow',{
							opt:'000',
							name:'',
							addr:'',
							phone:''
							 
						});
						lastIndex = $('#test').datagrid('getRows').length-1;
						 
						$('#test').datagrid('beginEdit', lastIndex);
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						cut();
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:false,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]
			});
			var p = $('#test').datagrid('getPager');
			$(p).pagination({
				onBeforeRefresh:function(){
					alert('before refresh');
				}
			});
		});
		function resize(){
			$('#test').datagrid('resize', {
				width:700,
				height:400
			});
		}
		
		function add(){
	   var	lastIndex = $('#test').datagrid('getRows').length-1;
		$('#test').datagrid('endEdit', lastIndex);
		 $('#test').datagrid('insertRow',{opt:'',name:'',addr:'',phone:''});
		 
		 $('#test').datagrid('appendRow',{
							opt:'',
							name:'',
							addr:'',
							phone:'' 
							 
						});
		 
		}
		
		function cut(){
		
		var rows = $('#test').datagrid('getSelections');
		alert(rows.length);
		if(rows.length<=0){
		alert("请选择要删除的数据");
		}
		 $('#test').datagrid('deleteRow');
		}
		function test(code){
		alert(code);
			var selected = $('#test').datagrid('getSelected');
			if (selected){
				alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.phone);
			}
			getSelections();
		}
		
		function getSelected(){
			var selected = $('#test').datagrid('getSelected');
			if (selected){
				alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
			}
		}
		function getSelections(){
			var ids = [];
			var rows = $('#test').datagrid('getSelections');
			alert("选择条数："+rows.length);
			for(var i=0;i<rows.length;i++){
				ids.push(rows[i].code);
			}
			alert(ids.join(':'));
		}
		function clearSelections(){
			$('#test').datagrid('clearSelections');
		}
		function selectRow(){
			$('#test').datagrid('selectRow',2);
		}
		function selectRecord(){
			$('#test').datagrid('selectRecord','002');
		}
		function unselectRow(){
			$('#test').datagrid('unselectRow',2);
		}
		function mergeCells(){
			$('#test').datagrid('mergeCells',{
				index:2,
				field:'addr',
				rowspan:2,
				colspan:2
			});
		}
	</script>
</head>
<body>
	<h2>Complex DataGrid</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>Click the button to do actions with datagrid.</div>
	</div>
	
	<div style="margin:10px 0;">
		<a href="#" onclick="getSelected()">GetSelected</a>
		<a href="#" onclick="getSelections()">GetSelections</a>
		<a href="#" onclick="selectRow()">SelectRow</a>
		<a href="#" onclick="selectRecord()">SelectRecord</a>
		<a href="#" onclick="unselectRow()">UnselectRow</a>
		<a href="#" onclick="clearSelections()">ClearSelections</a>
		<a href="#" onclick="resize()">Resize</a>
		<a href="#" onclick="mergeCells()">MergeCells</a>
	</div>
	
	<table id="test"></table>
	
</body>
</html>